<template>
  <t-loading :loading="loading">
    <div class="bg-box plugin">
      <div class="title">{{ lang.t('plugin_all') }}</div>
      <t-row :gutter="20">
        <t-col :md="6" :lg="4" :xxl="3" v-for="item in data">
          <div class="item flash">
            <img :src="item.img()" />
            <div class="name">
              {{ item.name() }}
            </div>
            <div class="body wrap">
              {{ item.content() }}
            </div>
            <div class="ok" v-if="item.ok">
              <t-icon name="check-circle-filled" />
            </div>
          </div>
        </t-col>
      </t-row>
    </div>
  </t-loading>
</template>

<script setup>
  import { ref, reactive } from 'vue'
  import app from '@/app'
  import userStore from '@/store/user'
  import { plugin } from '@/api/manage'
  
  const emit = defineEmits(['my'])
  const lang = app.lang.space('page.user.home')
  const loading = ref(false)
  const data = ref([])

  loading.value = true
  plugin().then(res => {
    let my = 0
    data.value = res.map(item => {
      item = app.plugin.make(item)
      item.ok = userStore.getData().plugin.includes(item.id())
      // 统计我的插件
      if(item.ok) {
        my++
        emit('my', my)
      }
      return item
    })
    loading.value = false
  })
</script>